<template>
  <div>
    <el-row>
      <el-col>

        <el-form :inline="true">
          <el-form-item>
            <el-input style="width: 500px;" v-model="search" placeholder="关键词" clearable @clear="getBooks"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchBooks">查询</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="5" v-for="(item,index) in books" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <el-image class="img" :src="item.booksImg" fit="fill">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="height: 200px;width: 135px;"></i>
            </div>
          </el-image>
          <div class="info">
            <span>书名:{{ item.booksName }}</span><br>
            <span>出版社:{{ item.booksPublish }}</span><br>
            <span>ISBN:{{ item.booksIsbn }}</span><br>
            <span>定价:{{ item.booksPrice }} 元</span><br>
          </div>
          <div>
            <div class="bottom">
              <el-button type="info"  class="button" @click="open(item.booksDesc)">简介</el-button>
              <el-button type="primary" class="button" style="margin-left: 0" @click="pay(item.booksId)">购买</el-button>
              <el-button type="success" class="button" style="margin-left: 0" @click="addCart(item)">加入购物车</el-button>
            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
  

</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      books: [],
      input:'',
      search:''
    };
  },
  methods: {
    getBooks() {
      this.$axios.get("/goods/getall", null).then(res => {
        console.log(res.data.data)
        this.books = res.data.data
      })
    },
    open(msg) {
      this.$alert(msg, '简介', {
        confirmButtonText: '确定',
      });
    },
    searchBooks() {
      if(this.search != ''){
        this.$axios.get("/goods/search",{
          params:{searchKey:this.search}
        }).then(res => {
          if(res.data.code == 1001){
            this.$message.error(res.data.message)
            this.getBooks()
          } else if(res.data.code == 0){
            this.$message.success(res.data.message)
            this.books = res.data.data
          }

        })
      } else {
        this.$message.error("请输入搜索关键字")
      }

    },
    addCart(item) {
      let userId = sessionStorage.getItem("user_id")
      if(userId == "") {
        this.$message.error("请先登录")
      } else {
        this.$prompt('数量', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          let cart = {
            booksId:item.booksId,
            booksName:item.booksName,
            booksPrice:item.booksPrice,
            cartNum:value,
            userId: userId
          }
          console.log(cart)
          this.$axios.post("/cart/add",cart).then(res => {
            if(res.data.code == 0) {
              this.$message.success("添加成功")
            } else {
              this.$message.error("添加失败")
            }
          })
        }).catch();
      }



    },
    getAddress() {
      this.$axios.get("/address/get",{params:{address_user_id:sessionStorage.getItem("user_id")}}).then(res => {
        if (res.data.data == null) {
          return false
        } else {
          return true
        }
      })
    },
    pay(bookId){
      if(sessionStorage.getItem("user_id") == "") {
        this.$message.error("请先登录")
      } else {
        if(this.getAddress()) {
          this.$prompt('请输入购买的数量', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({value}) => {
            if (parseInt(value) > 0) {

              let order = {
                orderBookId:bookId,
                orderUserId: parseInt(sessionStorage.getItem("user_id")),
                orderBookNumber:parseInt(value)
              }
              console.log(order)
              this.$axios.post("/order/create",order).then(res => {

                if(res.data.code == 0) {
                  this.$message.success(res.data.message)
                  console.log(res.data)
                } else  {
                  this.$message.error(res.data.message)
                }
              })
            } else if (value <= 0) {
              this.$message.error("非法数据")
            }

          }).catch();
        } else {
          this.$message.warning("请先填写收货地址")
        }

      }
    }

  },
  created() {
    this.getBooks()
  }
}
</script>

<style scoped>
.info{
  margin-top: 14px;
  float: left;
  font: 14px Arial, Helvetica, sans-serif;
  line-height: 150%;
  color: #666666;
}

.bottom {
  padding: 14px;
  line-height: 12px;
}
.button {
  height: 100%;
  width: 100%;
  margin-top: 5px;
}

.img {
  margin: 14px 12px 10px 14px;
  max-height: 200px;
  max-width: 135px;
  width: 100%;
  display: block;
  float: left;
}
.search {
  width: 100%;
  margin-bottom: 8px;
}

</style>